<template>
  <el-autocomplete v-model="field" :fetch-suggestions="querySearch"  class="inline-input w-50"
    v-bind="otherOptions" placeholder="选择图标" @select="handleSelect">
    <template #prefix>
      <svg-icon  :icon="selectIcon"></svg-icon>
    </template>
    <template #default="{ item }">
      <svg-icon :icon="item.value"></svg-icon> {{ item.value }}
    </template>
  </el-autocomplete>
</template>

<script setup lang="ts" >
import { ref, onMounted, computed, PropType} from 'vue';
import SvgIcon from "@/components/svg-icon"

interface RestaurantItem {
  value: string
}
const props = defineProps({
  dataList: {
    type:Array as PropType<RestaurantItem[]>,
    required: true
  },
  field: {
    type:String,
    required: true
  },
  otherOptions: {

  },
  fieldValue: {
    type:String,
    required: true
  },

})


let selectIcon = ref(props.fieldValue)



let dataList = ref<RestaurantItem[]>(props.dataList)

const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {

  const results = queryString
    ? dataList.value.filter(createFilter(queryString))
    : dataList.value
  cb(results)
    selectIcon.value =''
}

const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const loadAll = () => dataList.value

const handleSelect = (val:any) => {
  selectIcon.value = val['value']
}

onMounted(() => {
  restaurants.value = loadAll()
})

</script>

